<template>
  <view class="topicdetail">
    <view class="content">
      <view class="detail" v-if="goods_desc">
				<mpHtml :content="goods_desc"></mpHtml>
      </view>
    </view>
    <view class="list">
      <view class="title">专题推荐</view>
      <view class="item" v-for="(item, index) in recommendList" :key="index">
        <image :src="item.scene_pic_url" alt="">
        <view>{{item.title}}</view>
      </view>
    </view>
  </view>
</template>

<script>
	import mpHtml from '../../mp-html/mp-html.vue'
	export default {
		data() {
			return {
				goods_desc: '',
				id: '',
				recommendList: []
			}
		},
		components:{
			mpHtml
		},
		onLoad(option) {
			// this.id = this.$root.$mp.query.id		
			this.id = option.id
			this.getListData()
		},
		methods: {
			async getListData () {
			  const data = await this.$request({
					url:'/topic/detailaction',
					data:{
						id: this.id
					}
				})
			  console.log(data)
			  this.goods_desc = data.data.data.content
			  this.recommendList = data.data.recommendList
			}
		}
	}
</script>

<style lang="scss">
.topicdetail {
  .list {
    width: 690rpx;
    height: auto;
    margin: 0 30rpx;
    .title {
      text-align: center;
      background: #f4f4f4;
      font-size: 30rpx;
      color: #999;
      padding: 30rpx 0;
    }
    .item {
      width: 100%;
      padding: 24rpx 24rpx 30rpx 24rpx;
      margin-bottom: 30rpx;
      background: #fff;
      box-sizing: border-box;
      image {
        height: 278rpx;
        width: 642rpx;
        display: block;
      }
      view {
        display: block;
        margin-top: 30rpx;
        font-size: 28rpx;
      }
    }
  }
}
</style>
